<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript &amp; jQuery - Chapter 11: Content Panels - Photo Viewer</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/photo-viewer.css" />
  </head>

  <body>

    <header><h1>Monsieur Pigeon</h1></header>

    <section class="page panel">
      <h2>The Flower Series</h2>
      <div class="gallery">
        <div id="photo-viewer"></div>
        <div id="thumbnails">
          <a href="img/photo-1.jpg" class="thumb active" title="Elderberry Marshmallow"><img src="img/thumb-1.jpg" alt="Elderberry Marshmallow" /></a>
          <a href="img/photo-2.jpg" class="thumb" title="Rose Marshmallow"><img src="img/thumb-2.jpg" alt="Rose Marshmallow" /></a>
          <a href="img/photo-3.jpg" class="thumb" title="Crysanthemum Marshmallow"><img src="img/thumb-3.jpg" alt="Crysanthemum Marshmallow" /></a>
        </div>
      </div>
      <div class="description">
        <p class="standfirst">Take your tastebuds for a gentle stroll through an English garden filled with Monsieur Pigeon's beautifully fragrant Flower Series marshmallows.</p>
        <p>With three sweetly floral options: <strong>Elderberry</strong>, <strong>Rose Petal</strong>, and <strong>Chrysanthemum</strong> - all edible and all naturally flavored - they will have you dreaming of butterflies and birdsong in no time.</p>
        <p><strong>$5.75</strong> / 3.5 oz packet</p>
        <a href="" id="buy">Buy now</a>
      </div>
    </section>


    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/photo-viewer.js"></script>

  </body>
</html>